import React, { useEffect, useRef, useState } from 'react'
import Basic from './Basic'
import { Button, Checkbox } from 'antd'
import "./index.scss"
export default function Setable({ datas, handleChange }) {
    const defaultData = datas.map((item, index) => ({
        ...item,
        key: item.dataIndex,
        fixedS: false,
        fixedE: false,
        fixed: false,
        index,
        hidden: false
    }))
    const [allData, setAllData] = useState(defaultData)
    const [allChecked, setAllChecked] = useState(defaultData.map(item => item.key))
    const [topData, setTopData] = useState([])
    const [topChecked, setTopChecked] = useState([])
    const [middleData, setMiddleData] = useState(defaultData)
    const [middleChecked, setMiddleChecked] = useState([])
    const [bottomData, setBottomData] = useState([])
    const [bottomChecked, setBottomChecked] = useState([])
    const [isAll, setIsAll] = useState(true)
    const [indeterminate, setindeterminate] = useState(false)
    const resData = useRef(null)
    useEffect(()=>{
        resData.current = [...defaultData]
    },[])
    useEffect(() => {
        handleChange([...topData, ...middleData, ...bottomData])
        setAllData([...topData, ...middleData, ...bottomData])
        setTopChecked(topData.map(item => item.key))
        setMiddleChecked(middleData.map(item => item.key))
        setBottomChecked(bottomData.map(item => item.key))
    }, [middleData, topData, bottomData])
    useEffect(() => {
        setAllData(allData.map(item => ({
            ...item,
            hidden: !allChecked.includes(item.key)
        })))
        handleChange(allData.map(item => ({
            ...item,
            hidden: !allChecked.includes(item.key)
        })))
    }, [allChecked])
    const toggleFixedL = (data) => {
        if (data.fixedS) {
            setTopData(topData.filter(item => item.key !== data.key))
            setMiddleData([
                ...(middleData.slice(0, data.index)),
                {
                    ...data,
                    fixedS: false,
                    fixed: false
                },
                ...(middleData.slice(data.index, middleData.length)),
            ])
        } else {
            setMiddleData(middleData.filter(item => item.key !== data.key))
            setBottomData(bottomData.filter(item => item.key !== data.key))
            setTopData([
                ...topData,
                {
                    ...data,
                    fixedS: true,
                    fixedE: false,
                    fixed: 'left'
                }
            ])
        }
    }
    const toggleFixedR = (data) => {
        if (data.fixedE) {
            setBottomData(bottomData.filter(item => item.key !== data.key))
            setMiddleData([
                ...(middleData.slice(0, data.index)),
                {
                    ...data,
                    fixedE: false,
                    fixed: false
                },
                ...(middleData.slice(data.index, middleData.length)),
            ])
        } else {
            setMiddleData(middleData.filter(item => item.key !== data.key))
            setTopData(topData.filter(item => item.key !== data.key))
            setBottomData([
                ...bottomData,
                {
                    ...data,
                    fixedS: false,
                    fixedE: true,
                    fixed: 'right'
                }
            ])
        }
    }
    const handleAllChange = (e) => {
        setindeterminate(false)
        setIsAll(e.target.checked)
        if (e.target.checked) {
            setTopChecked(topData.map(item => item.key))
            setMiddleChecked(middleData.map(item => item.key))
            setBottomChecked(bottomData.map(item => item.key))
        } else {
            setTopChecked([])
            setBottomChecked([])
            setMiddleChecked([])
        }
    }
    useEffect(() => {
        setindeterminate(allChecked.length > 0 && allChecked.length < allData.length)
        setIsAll(allChecked.length === allData.length)
    }, [allChecked.length, allData.length])
    useEffect(() => {
        setAllChecked([...topChecked, ...middleChecked, ...bottomChecked])
    }, [topChecked, middleChecked, bottomChecked])
    const handleCheck = (vals, type) => {
        if (type === 'top') {
            setTopChecked(vals)
        } else if (type === 'middle') {
            setMiddleChecked(vals)
        } else {
            setBottomChecked(vals)
        }
    }
    const handleReset = () => {
        setAllData(resData.current)
        setAllChecked(resData.current.map(item => item.key))
        setTopData([])
        setBottomData([])
        setMiddleData(resData.current)
    }
    return (
        <div className='setable-container'>
            <div className='tool'>
                <Checkbox checked={isAll} indeterminate={indeterminate} onChange={handleAllChange}>列展示</Checkbox>
                <Button onClick={handleReset} type='link'>重置</Button>
            </div>
            {topData.length > 0 && <p>固定在左侧</p>}
            {topData.length > 0 && <Basic datas={topData} checkeds={topChecked} type="top" handleCheck={handleCheck} handleMove={(newDate) => setTopData(newDate)} toggleFixedL={toggleFixedL} toggleFixedR={toggleFixedR}></Basic>}
            {(topData.length > 0 || bottomData.length > 0) && <p>不固定</p>}
            <Basic datas={middleData} checkeds={middleChecked} type="middle" handleCheck={handleCheck} handleMove={(newDate) => setMiddleData(newDate)} toggleFixedL={toggleFixedL} toggleFixedR={toggleFixedR}></Basic>
            {bottomData.length > 0 && <p>固定在右侧</p>}
            {bottomData.length > 0 && <Basic checkeds={bottomChecked} type="bottom" handleCheck={handleCheck} datas={bottomData} handleMove={(newDate) => setBottomData(newDate)} toggleFixedL={toggleFixedL} toggleFixedR={toggleFixedR}></Basic>}
        </div>
    )
}
